<script>
	export default {
		name: "MyFenLei",
		data(){
			return{
				bannerMenuFlag:false,
				menuTimer:"",
				listInfoData:[],
				//一级分类
				menus:[],
				category3:{}
			}
		},
		methods:{
			bannerMenuHide(){
				this.menuTimer=setTimeout(()=>{
					this.bannerMenuFlag=false;
				},300);
			},
			bannerMenuShow(type){
				if (type){
					this.listInfoData=this.category3[type];
				}
				this.bannerMenuFlag=true;
				clearTimeout(this.menuTimer);
			},
			init(){
				this.$axios.get("/product/category/selectAllCategory13").then((res)=>{
					if(res.data.code===0){
						let cateMenus=res.data.data;
						for(let i=0;i<cateMenus.length;i++){
							const  cate=cateMenus[i];
							this.menus.push({
								value: cate.name,
								type:cate.id,
								url:"/product/selectByCategory1Id/"+cate.id
							})
							
							this.category3[cate.id]=cate.category3
						}
					}
				});
			},
		},
		
		mounted() {
			this.init();
		},
		computed:{
			menuListMatch(){
				const matchData=[];
				if(this.listInfoData && this.listInfoData.length){
					for(let i=0;i<this.listInfoData.length;i+=6){
						matchData.push(this.listInfoData.slice(i,i+6));
					}
				}
			}
		}
		
	}
</script>

<template>
	<div class="menu-banner" id="myFenLei" style="width: 150px;">
		<div class="menu-container" @mouseleave="bannerMenuHide()">
<!--			循环所有的分类-->
			<ul class="menu=list">
				<li
					class="list-item"
					v-for="(item,index) in menus"
					:key="index"
					@mouseenter="bannerMenuShow(item.type)">
					<a :href="item.url" target="blank">{{item.value}}</a>
					<i class="fa fa-angle-right"></i>
				</li>
			</ul>
		</div>
		<div
			class="menu-info"
			v-show="bannerMenuFlag"
			@mouseleave="bannerMenuHide()"
			@mouseenter="bannerMenuShow()">
			<ul
				class="menu-info-list"
				v-for="(list,key) in menuListMatch"
				:key="key"
				:data-key="key">
				<li
					class="info-list-item"
					v-for="(item,index) in list"
					:key="index"
					:data-index="index">
					<a :href="item.url">
						<img :src="item.image" :alt="item.name"/>
						<span class="">{{item.name}}</span>
					</a>
				</li>
			</ul>
		</div>
		
	</div>

</template>

<style scoped>

</style>